<template>
  <div>
    <van-search
      v-model="keyword"
      placeholder="请输入搜索关键词"
      shape="round"
      @input="search"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="keyword === ''">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="item in keywordList"
          :key="item.score"
          @click="clickKeyord(item.searchWord)"
          >{{ item.searchWord }}</span
        >
      </div>
    </div>
    <!-- 搜索到的歌曲 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <!-- 单元格 -->
      <van-cell-group>
        <!-- center 里面的内容垂直居中 -->
        <SongItem
          v-for="item in songList"
          :key="item.id"
          :title="item.name"
          :label="item.artists[0].name"
          :id="item.id"
        >
        </SongItem>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
// 按需引入
import { getKeyword, searchWord } from "@/api/Search";
export default {
  name: "Search",
  data() {
    return {
      keyword: "",
      keywordList: "",
      songList: "",
    };
  },
  created() {
    this.getKeyword();
  },
  methods: {
    // 输入搜索
    async search() {
      // 解构出result和code
      const { code, result } = await searchWord(this.keyword);
      // console.log(result);
      if (code === 200) {
        this.songList = result.songs;
      }
    },
    // 获取热门搜索
    async getKeyword() {
      // 解构出data和code
      const { data, code } = await getKeyword();
      console.log(data);
      if (code === 200) {
        this.keywordList = data;
      }
    },
    // 点击按钮搜索
    clickKeyord(keyword) {
      // 把v-model双向绑定的值改为点击按钮的那个值，在调用输入搜索函数
      this.keyword = keyword;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
  margin-bottom: 0.266667rem;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0 0 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>